<template>
  <div class="mui-pages record-member-lists">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <div @click="fn.back()" class="mui-action-back"><img class="back-btn" src="../../../../static/images/back.png"></div>
        <div v-if="!result.checkByName || result.checkByName === ''" class="header-search flex-center">未答说明申请详情</div>
        <div v-if="result.checkByName && result.checkByName !== ''" class="header-search flex-center">未答说明审批详情</div>
      </div>
    </header>
    <div id="scroll1" class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <ul class="mui-table-view meeting-editor-lists">
          <li class="mui-table-view-cell flex-between-center" id="typeSelect">
            <b>试卷名称：</b>
            <span class="mine-lists-content">{{result.paperName}}</span>
          </li>
          <li class="mui-table-view-cell flex-between-center" id="rangeSelect">
            <b>申请人员：</b>
            <span class="mine-lists-content">{{result.dangYuanName}}</span>
          </li>
          <li class="mui-table-view-cell flex-between-center">
            <b>所属支部：</b>
            <span class="mine-lists-content">{{result.partyGroupName}}</span>
          </li>
          <li class="mui-table-view-cell flex-between-center">
            <b>提交人：</b>
            <span class="mine-lists-content">{{result.userName}}</span>
          </li>
          <li class="mui-table-view-cell">
            <b>情况说明：</b>
            <p class="organization-lists-title">{{result.reason}}</p>
          </li>
          <li class="mui-table-view-cell">
            <b>附件：</b>
            <div class="text-center no-data" v-if="!attachmentList || attachmentList.length===0">
              <img src="../../../../static/images/no_data.png" alt="">
              <p>暂无数据</p>
            </div>
            <div class="flex-justify-start" v-if="attachmentList">
              <ul class="list-item mui-content-padded flex-justify-start" v-if="attachmentList">
                <li class="enclosure-upload" v-for="(data,index) in getFilePath(attachmentList)" :key="data.fileId">
                  <img v-if="isImage(data.fileName)" class="enclosure-upload-file" :src="data.url" @click="showImagePreview(data.url)" />
                  <img v-if="!isImage(data.fileName)" class="enclosure-upload-file" src="../../../../static/images/up_document.png"  @click="downLoadFile(data)" />
                  <p class="mui-ellipsis">{{data.fileName}}</p>
                </li>
              </ul>
            </div>
          </li>
          <li v-if="result.checkByName && result.checkByName !== ''" class="mui-table-view-cell flex-between-center">
            <b>审批结果：</b>
            <span v-if="result.result === '0'" class="mine-lists-money">不同意</span>
            <span v-if="result.result === '1'" class="work-blue">已同意</span>
          </li>
          <li v-if="result.checkByName && result.checkByName !== ''" class="mui-table-view-cell flex-between-center">
            <b>审批人：</b>
            <span class="mine-lists-content">{{result.checkByName}}</span>
          </li>
          <li v-if="result.result === '0'" class="mui-table-view-cell">
            <b>审批意见：</b>
            <p class="organization-lists-title">{{result.resultDescribe}}</p>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="showBtn" class="patch-bottom message-details flex-center">
      <div class="work-message-lists login-form" id="disagree">
        <div @click="confirmMsg('0')" class="sign-start-btn">不同意</div>
      </div>
      <div @click="submit('1')" class="sign-end-btn">同意</div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import api from '@/common/config/api'
  import moment from 'moment'
  export default {
    name: 'noanswerApplyDetails',
    data () {
      return {
        fn: tools,
        result: {},
        attachmentList: [],
        requestId: '',
        showBtn: false
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      loadData () {
        this.requestId = this.$route.params.recordId
        let data = {
          requestId: this.requestId
        }
        loginService.getDetail(data).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.result = res.data
          if (res.data) {
            if (res.data.attachment && res.data.attachment !== '') {
              this.attachmentList = JSON.parse(res.data.attachment)
            }
          }
          if (!this.result.checkByName || this.result.checkByName === '') {
            this.showBtn = true
          }
        })
      },
      formateTime (str) {
        moment.lang('zh-cn')
        return moment(str).format('MM月DD日')
      },
      getFilePath (arr) {
        arr.map((v) => {
          v.url = api.downLoadFile + v.fileId
          return v
        })
        return arr
      },
      isImage (fileName) {
        let arrExt = fileName.split('.')
        return 'PNG,JPG,JPEG,BMP,GIF'.split(',').indexOf(arrExt[arrExt.length - 1].toUpperCase()) > -1
      },
      showImagePreview (url) {
        if (url.length < 1) {
          return false
        }
        let imgs = [url]
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': false
            },
            slot: 'header'
          }, '')
        }).show()
      },
      downLoadFile (item) {
        console.log("item={}", item)
        if (window.android && window.android.downloadFile) {
          window.android.downloadFile(item.url, item.fileName)
        }
      },
      submit (flag) {
        let dataParam = {
          requestId: this.requestId,
          result: flag,
          resultDescribe: this.msg
        }
        loginService.dealWithExamNoAnswerRequest(dataParam).then((res) => {
          if (res.code !== 200) {
            return tools.tip("提交失败！")
          }
          tools.tip("提交成功！")
          this.fn.back()
        })
      },
      confirmMsg (opinionType) {
        this.dialog = this.$createDialog({
          type: 'prompt',
          title: '不同意原因',
          prompt: {
            value: '',
            placeholder: '请输入'
          },
          onConfirm: (e, promptValue) => {
            this.msg = promptValue
            this.submit(opinionType)
          }
        }).show()
      }
    }
  }
</script>

<style lang="">
  input[type='text'] {
    margin-bottom:0;
  }
</style>
